<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.clearfix:after,
			.clearfix:before {
				content: '';
				display: table;
			}
			
			.clearfix:after {
				clear: both;
			}
			
			.box {
				height: 1000px;
				background-size: 100% 100%;
			}
			
			.logo {
				width: 100%;
				height: 120px;
				margin: auto;
			}
			
			.logo img {
				width: 300px;
				height: 100px;
				display: block;
				margin: auto;
				padding-top: 10px;
			}
			
			.y_login {
				width: 450px;
				background: #ccc;
				padding: 50px;
				box-sizing: border-box;
				position: absolute;
				left: 50%;
				top: 20%;
				margin-left: -225px;
				background-color: #efefef;
			}
			
			.y_login_cont {
				margin: auto;
			}
			
			.y_login_cont .modal-body {
				float: left;
				min-height: 400px;
				display: none;
				margin-left: 50px;
				box-sizing: border-box;
			}
			
			.y_login_cont .modal-body:nth-child(1) {
				padding-top: 130px;
			}
			
			.y_login_cont .form-group label {
				display: block;
				padding: 10px 0;
				font-weight: 600;
				font-size: 18px;
			}
			
			.y_login_cont .form-group input {
				width: 260px;
				height: 35px;
				/*border: none;*/
				padding-left: 10px;
				box-sizing: border-box;
			}
			
			::-webkit-input-placeholder {
				padding-left: 10px;
			}
			
			.y_login_cont .form-group img {
				width: 60px;
				height: 60px;
				display: block;
				margin: auto;
				border-radius: 50%;
				margin-bottom: 30px;
			}
			
			#y_login_list {
				width: 260px;
				display: block;
				margin: auto;
			}
			
			#y_login_list li {
				width: 100px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				border-radius: 5px;
				border: solid 1px #008CFF;
				color: #008CFF;
				margin-top: 30px;
			}
			
			#y_login_list li:nth-child(1) {
				float: left;
			}
			
			#y_login_list li:nth-child(2) {
				float: right;
			}
			
			.y_login_cont .show {
				display: block;
			}
			
			#y_login_list li a {
				text-decoration: none;
				color: #008CFF;
			}
			
			#y_login_list li.active a {
				background: #008cff;
				color: #FFF;
			}
			
			#y_login_list li.active {
				background: #008cff;
				color: #FFF;
			}
			
			.y_login_bottom {
				width: 100%;
				padding-bottom: 30px;
			}
			
			.y_login_bottom p {
				font-size: 16px;
				line-height: 50px;
				text-align: center;
			}
			
			.cont {
				min-height: 700px;
			}
			
			#btn_up {
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				border-radius: 5px;
				border: solid 1px #008CFF;
				color: #008CFF;
				margin: 50px 0 0;
				background: #FFF;
			}
			
			#btn_in {
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				border-radius: 5px;
				border: solid 1px #008CFF;
				color: #008CFF;
				margin: 50px 0 0;
				background: #FFF;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="logo">
				<img src="images/2.png" />
			</div>
			<div class="cont">
				<div class="y_login">
					<div class="y_login_cont clearfix">
						<div class="modal-body show">
							<div class="form-group">
								<label for="user">账号</label>
								<input type="text" class="form-control" id="user_in" placeholder="账号">
							</div>
							<div class="form-group">
								<label for="pass">密码</label>
								<input type="password" class="form-control" id="pass_in" placeholder="密码">
							</div>
							<div class="form-group">
								<button id="btn_in">确认登录</button>
							</div>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<img id="img_up" src="" />
								<input type="file" name="img_file" id="img_file" value="" />
							</div>
							<div class="form-group">
								<label for="user">昵称</label>
								<input type="text" class="form-control" id="names" placeholder="昵称">
							</div>
							<div class="form-group">
								<label for="user">账号</label>
								<input type="text" class="form-control" id="user_up" placeholder="账号">
							</div>
							<div class="form-group">
								<label for="pass">密码</label>
								<input type="password" class="form-control" id="pass_up" placeholder="密码">
							</div>
							<div class="form-group">
								<button id="btn_up">确认注册</button>
							</div>
						</div>
					</div>
					<ul id="y_login_list" class="clearfix">
						<li class="active" id="y_login_btn">
							<a>登录</a>
						</li>
						<li>注册</li>
					</ul>
				</div>
			</div>
			<div class="y_login_bottom">
				<p>清朗网文　|　关于逐浪　|　作者投稿　|　用户指南　|　服务条款　|　版权声明　|　网站地图　|　招聘信息　|　联系我们</p>
				<p>Copyright © 2019 zhulang.com, All Rights Reserved. 南京大众书网图书文化有限公司版权所有 未经书面许可不得复制转载。</p>
				<p>增值电信业务经营许可证苏B2-20130019 苏ICP备12028084号 苏网文[2016]5224-123号 新出网证（苏）字0027号　</p>
			</div>
		</div>
	</body>
	<script src="jquery.js"></script>
	<script type="text/javascript">
		$('#y_login_list li').on('click', function() {
			var i = $(this).index()
			$(this).addClass('active').siblings().removeClass('active')
			$('.y_login_cont .modal-body').eq(i).addClass('show').siblings().removeClass('show')
		})
		var href = 'http://localhost:8000'

		var img_url = ''
		//上传头像
		img_file.onchange = function() {
			var f = img_file.files[0]
			var d = new FormData
			d.append('img', f)
			$.ajax({
				type: "post",
				url: href + "/files/img",
				data: d,
				contentType: false,
				processData: false,
				success(data) {
					console.log(data)
					img_url = href + data
					$('#img_up').attr('src', img_url)
				}
			});
		} 
		//注册
		btn_up.onclick = function() {
			if(user_up.value == '' || pass_up.value == '') {
				alert('不能为空')
			} else if(img_file.files[0] == undefined) {
				alert('请上传头像')
			} else if(/[\u4E00-\u9FA5]/g.test(user_up.value) || /[\u4E00-\u9FA5]/g.test(pass_up.value)) {
				alert('账号或密码不能出现中文')
			} else if(!(/^[1][3,4,5,7,8][0-9]{9}$/.test(user_up.value))) {
				alert('请输入正确11位数字账号')
			} else if(names.value.length >= 7) {
				alert('最长输入6个文字或英文')
			} else {
				$.ajax({
					type: "post",
					url: href + "/index/up",
					data: {
						name: names.value,
						user: user_up.value,
						pass: pass_up.value,
						img: img_url
					},
					success(data) {
						alert(data)
						names.value = ''
						user_up.value = ''
						pass_up.value = ''
						img_file.value = ''
						$('#img_up').attr('src', '')
					}
				});
			}
		}

		//登录
		btn_in.onclick = function() {
			if(user_in.value == '' || pass_in.value == '') {
				alert('不能为空')
			} else if(/[\u4E00-\u9FA5]/g.test(user_in.value) || /[\u4E00-\u9FA5]/g.test(pass_in.value)) {
				alert('不能出现中文')
			} else if(!(/^[1][3,4,5,7,8][0-9]{9}$/.test(user_in.value))) {
				alert('请输入正确11位数字账号')
			} else {
				$.ajax({
					type: "post",
					url: href + "/index/in",
					data: {
						user: user_in.value,
						pass: pass_in.value,

					},
					success(data) {
						console.log(data)
						if(data == '账号或密码错误') {
							alert(data)
							user_in.value = ''
							pass_in.value = ''
						} else {
							alert('登录成功')
							user_in.value = ''
							pass_in.value = ''
							localStorage.user = data.user
							localStorage.uid = data.uid
							localStorage.img = data.img
							localStorage.name = data.name
							window.location.href=href
							
						}
					}
				});
			}

		}
	</script>

</html>